<template>
	<div>
		<div>
			<SelectTimer>
				<template #default>
					<div class="flex items-center">
						<div class="ml-6px mr-6px">
							<SelectBox title="类型" :list="methodsList"></SelectBox>
						</div>
						<div class="mr-6px">
							<SelectBox title="收支" :list="revenueList"></SelectBox>
						</div>
						<div class="mr-6px">
							<SelectBox title="合约" :list="contractList"></SelectBox>
						</div>
					</div>
				</template>
			</SelectTimer>
		</div>
		<el-table :data="tableData" style="width: 100%" class="contract-table">
			<el-table-column prop="orderId" label="订单号">
			</el-table-column>
			<el-table-column prop="time" label="时间">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<span class="text-[14px] font-[400]">{{ scope.row.time }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="methods" label="类型">
			</el-table-column>
			<el-table-column prop="income" label="收支类型">
			</el-table-column>
			<el-table-column prop="sum" label="总额">
			</el-table-column>
			<el-table-column prop="tradeClass" label="资产总类">
			</el-table-column>
			<el-table-column prop="contract" label="合约">
			</el-table-column>
		</el-table>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import SelectTimer from '../components/SelectTimer.vue';
import SelectBox from '../components/SelectBox.vue';
const tableData = ref<any[]>([
	{
		orderId:'1252521526',
		time: '2025-02-02 12:25:25',
		methods:'划转',
		income:'收入',
		sum:'-5.384010',
		tradeClass:'USDT',
		contract:'BTC/USDT'
	},
	{
		orderId:'1252521526',
		time: '2025-02-02 12:25:25',
		methods:'保证金',
		income:'支出',
		sum:'-5.384010',
		tradeClass:'USDT',
		contract:'BTC/USDT'
	},
	{
		orderId:'1252521526',
		time: '2025-02-02 12:25:25',
		methods:'平仓手续费',
		income:'收入',
		sum:'-5.384010',
		tradeClass:'USDT',
		contract:'BTC/USDT'
	},
	{
		orderId:'1252521526',
		time: '2025-02-02 12:25:25',
		methods:'平仓手续费',
		income:'收入',
		sum:'-5.384010',
		tradeClass:'USDT',
		contract:'BTC/USDT'
	}
])

const methodsList = ref<any[]>([
	{
		label:'全部',
		value:'全部'
	},
	{
		label:'划转',
		value:'划转'
	},
	{
		label:'保证金',
		value:'保证金'
	},
	{
		label:'平仓手续费',
		value:'平仓手续费'
	},
	{
		label:'开仓手续费',
		value:'开仓手续费'
	},
	{
		label:'资金费率',
		value:'资金费率'
	},
	{
		label:'爆仓清算手续费',
		value:'爆仓清算手续费'
	},
	{
		label:'已实现盈亏',
		value:'已实现盈亏'
	},
	{
		label:'系统操作',
		value:'系统操作'
	}
])

const revenueList = ref<any[]>([
	{
		label:'全部',
		value:'全部'
	},
	{
		label:'收入',
		value:'收入'
	},
	{
		label:'支出',
		value:'支出'
	}
])

const contractList = ref<any[]>([
	{
		label:'全部',
		value:'全部'
	},
	{
		label:'BTC/USDT',
		value:'BTC/USDT'
	},
	{
		label:'ETH/USDT',
		value:'ETH/USDT'
	},
	{
		label:'LTC/USDT',
		value:'LTC/USDT'
	},
	{}
])
</script>

<style lang="scss" scoped>
.contract-table {
	--el-bg-color: #121212;
	color: #fff;
	font-size: 12px;
	--el-table-header-text-color: #fff;
	--el-table-row-hover-bg-color: #181A20;
	--el-table-border-color: #202020;
	--el-table-border: 4px solid #202020;

	// --el-table-border-color:none;
	::v-deep .el-table__empty-block {
		background-color: #121212;
		color: #fff;
	}

}
</style>
